//*Frame
function createInternalSpace(){
	var mainWidget = new dijit.layout.BorderContainer({
			id:"main",
			gutters:false
		});
	mainWidget.domNode.className = "mainDiv";
	//logo(top)
	var _logoWidget = new dijit.layout.ContentPane({
		id:"logo",
		region:"top"
	});
	_logoWidget.domNode.className ="logo title1";
	_logoWidget.domNode.appendChild(createLogo());
	
	//space(center)
	var _spaceWidget = new dijit.layout.BorderContainer({
		region:"center",
		gutters:false
	});

	var _topToolBar = new dijit.Toolbar({
		id: "toolBar",
		region: "top"
	});
	_topToolBar.domNode.className ="title2 topTool ";

	var _sideWidget = new dijit.layout.BorderContainer({
		design: "sidebar",
		region: "center",
		gutters: false
	});
	//Left space
	var _leftWidget = new dijit.layout.BorderContainer({
		region: "leading",
		splitter: true,
		sizeMin: "20",
		sizeMax: "200",
		gutters: false
	});
	_leftWidget.domNode.className = "leftSideDiv";
	var _catalogToolBar =  new dijit.Toolbar({
		id: "catalogToolBar",
		region: "top"
	});
	dojo.addClass(_catalogToolBar.domNode,"topTool ");
	var _catalogSpace = new dijit.layout.ContentPane({
		id: "treeSpace",
		region: "center"
	});
	_leftWidget.addChild(_catalogToolBar);
	_leftWidget.addChild(_catalogSpace);

	//Center space
	var _centerWidget = new dijit.layout.BorderContainer({
		region: "center",
		gutters: false
	});
	_centerWidget.domNode.className ="centerSideDiv";
	//AccountList container
	var _listContainer = new dijit.layout.BorderContainer({
		region: "top",
		splitter: true,
		gutters: false
	});
	_listContainer.domNode.className = "listContainerDiv";
	var _accountToolBar =  new dijit.Toolbar({
		id: "accountToolBar",
		region: "top"
	});
	dojo.addClass(_accountToolBar.domNode,"topTool ");
	var _listSpace = new dijit.layout.ContentPane({
		id: "accountList",
		region: "center"
	});
	_listContainer.addChild(_accountToolBar);
	_listContainer.addChild(_listSpace);
	//OperationDetails container
	var _detailsContainer = new dijit.layout.BorderContainer({
		id: "detailsSpace",
		region: "center"
	});
	_centerWidget.addChild(_listContainer);
	_centerWidget.addChild(_detailsContainer);
	_sideWidget.addChild(_leftWidget);
	_sideWidget.addChild(_centerWidget);
	_spaceWidget.addChild(_topToolBar);
	_spaceWidget.addChild(_sideWidget);
	
	mainWidget.addChild(_logoWidget);
	mainWidget.addChild(_spaceWidget);
	return mainWidget;
}

function createExteriorSpace(titleDiv,summaryDiv,form){
	var mainWidget = new dijit.layout.BorderContainer({
			id:"main",
			splitter:false,
			gutters:false
		});
	mainWidget.domNode.className = "mainDiv ";
	//logo(top)
	var _logoWidget = new dijit.layout.ContentPane({
		id:"logo",
		region:"top",
		"class":"logo title1"
	});
	_logoWidget.domNode.className = "logo title1";
	_logoWidget.domNode.appendChild(createLogo());
	
	//space(center)
	var _spaceWidget = new dijit.layout.ContentPane({
		region:"center"
	});
	_spaceWidget.domNode.className = "spaceDiv";
	var _center = document.createElement("center");//center space(#!want to implement with css)
	
	var _spaceContainer = document.createElement("div");
	_spaceContainer.className = "containerDiv";
	var _formDiv = document.createElement("div");
	_formDiv.className = "formContainerDiv";
	_formDiv.appendChild(createDefaultFormMsg());
	_formDiv.appendChild(form);
	var _introDiv = document.createElement("div");
	_introDiv.className = "introduction";
	_introDiv.innerHTML = "introduction";
	_spaceContainer.appendChild(titleDiv);
	_spaceContainer.appendChild(summaryDiv);
	_spaceContainer.appendChild(_formDiv);
	_spaceContainer.appendChild(_introDiv);
	_center.appendChild(_spaceContainer)
	_spaceWidget.domNode.appendChild(_center);

	mainWidget.addChild(_logoWidget);
	mainWidget.addChild(_spaceWidget);
	
	return mainWidget;
}

function createDefaultDetailsSpace(form){
	var _spaceTitleDiv = createDefaultSpaceTitle();
	var _submit_result_msg = createDefaultFormMsg();	
	var _spaceMainDiv = document.createElement("div");
	_spaceMainDiv.className="spaceMain";
	_spaceMainDiv.appendChild(_submit_result_msg);
	if(form){
		_spaceMainDiv.appendChild(form);
	}
	var detailsDiv = new dijit.layout.ContentPane();
	detailsDiv.domNode.className="details";
	detailsDiv.domNode.appendChild(_spaceTitleDiv);
	detailsDiv.domNode.appendChild(_spaceMainDiv);

	return detailsDiv;
}

//*Component
function createLogo(){
	var logoTable = createDomTabel({
		row:1,
		col:2
	    });

	logoTable.className = "logo";
	var _logoFont = document.createElement("font");
	_logoFont.className="logo";
	_logoFont.innerHTML = "Self Pass LOGO";
	var _welcomeMsg = document.createElement("label");
	_welcomeMsg.className="welcomeMsg msg";
	_welcomeMsg.id = "welcome"; 
	logoTable.rows[0].cells[0].appendChild(_logoFont);
	logoTable.rows[0].cells[1].appendChild(_welcomeMsg);
	return logoTable;
}

function createExteriorTitle(title){
	var titleDiv = document.createElement("div");
	titleDiv.className="title3 initTitle";
	titleDiv.innerHTML = title;
	return titleDiv;
}

//Default Creator
function createDefaultSpaceTitle(){
	var spaceTitleDiv = document.createElement("div");
	spaceTitleDiv.className="title3 spaceTitle";
	spaceTitleDiv.id = "detailspaceTitle";
	return spaceTitleDiv;
}

function createSummaryMsg(summayMsg){
	var _summary_msg = document.createElement("label");
	_summary_msg.innerHTML = summayMsg;
	_summary_msg.className="pageSummary msg";
	var summaryMsgDiv = document.createElement("div");
	summaryMsgDiv.className="summary";
	summaryMsgDiv.appendChild(_summary_msg);
	return summaryMsgDiv;
}

function createFormItemSummaryMsg(summayMsg){
	var _summary_msg = document.createElement("label");
	_summary_msg.innerHTML = summayMsg;
	_summary_msg.className="pageSummary itemMsg";
	return _summary_msg;
}

function createDefaultFormMsg(){
	var _submit_result_msg = document.createElement("label");
	_submit_result_msg.id = "submit_result_msg";
	var formMsgDiv = document.createElement("div");
	formMsgDiv.className="formMsg";
	formMsgDiv.appendChild(_submit_result_msg);
	return formMsgDiv;
}

function creatDefaultButtonTable(button){
	var buttonTable = createDomTabel({
		row:1,
		col:1
		});
	buttonTable.className="detailsSubmit";
	buttonTable.rows[0].cells[0].align="right";
	buttonTable.rows[0].cells[0].appendChild(button);
	return buttonTable; 
}

function createRequiredSign(){
	var sign = document.createElement("em");
	sign.innerHTML = " *";
	sign.className="requiredSign";
	return sign;
}

function createDefaultDetailTable(attr){
	var _detailCells = attr["cells"];
	var detailTable = createDomTabel({
		row:_detailCells.length,
		col:2
		});
	detailTable.className = "detail";
    detailTable.border = "0";
	for(var r=0; r<_detailCells.length; r++){
		//msg row
		if(_detailCells[r]["msg"]){
			 detailTable.rows[r].cells[0].colSpan="2";
			 detailTable.rows[r].cells[0].appendChild(_detailCells[r]["msg"]);
			 detailTable.rows[r].cells[0].className = "msg";
			 detailTable.rows[r].cells[0].width = "100%";
		}
		//input row
		else{
			//row title
		   detailTable.rows[r].cells[0].appendChild(_detailCells[r]["th"]);
		   if(_detailCells[r]["required"]){
			   detailTable.rows[r].cells[0].appendChild(createRequiredSign());
		   }
		   detailTable.rows[r].cells[0].className = "th";
		   detailTable.rows[r].cells[0].width = "30%";
		   //row contents
		   for(var input=0; input<_detailCells[r]["td"].length; input++){
			   detailTable.rows[r].cells[1].appendChild(_detailCells[r]["td"][input]);
		   }
		   detailTable.rows[r].cells[1].className = "input";
		   detailTable.rows[r].cells[1].width = "70%";
		}
	}
	return detailTable;	
}
